<script setup lang="ts">
import pageWrap from "@/components/pageWrap/index.vue";
import { Button, Collapse, CollapsePanel, message } from "ant-design-vue";
import { ref } from "vue";
import { auth, auths, authAll } from "@/utils/authFunction";
import CodeMirror from "@/components/CodeMirror/index.vue";
import authJson from './components/auth.json'
import { Icon } from "@iconify/vue";

const activeKey = ref(1);
const codeRef = ref();
const handlePath = (type: string) => {
  switch (type) {
    case "auth":
      codeRef.value.open("函数权限", authJson);
      break;
    default:
      message.error("暂无代码示例");
      break;
  }
};
</script>
<template>
  <pageWrap headerContent>
    <template v-slot:header>
      <div class="text-2xl h-12 pl-5 pt-2 font-bold">按钮权限</div>
      <div class="pl-5">
        由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，可以查看
        src/utils/authFunction.ts <br />引入:import { auth,auths,authAll } from
        "@/utils/authFunction";
      </div>
    </template>
    <div class="overflow-y-auto pb-20">
      <div>
        <div class="bg-white p-2">
          <Collapse v-model:activeKey="activeKey">
            <CollapsePanel key="1" header="单个函数权限">
              <div class="flex items-center">
                <div class="mr-5">用法 v-if="auth('xxx')"</div>
                <Button type="primary" v-if="auth('system:menu:add')"
                  >我是单个函数权限</Button
                >
              </div>
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('auth')"
              /></template>
            </CollapsePanel>
            <CollapsePanel
              key="2"
              header="多个函数权限 auths(['', '']) 满足其中一个返回true"
            >
              <div class="flex items-center">
                <div class="mr-5">用法 v-if="auths(['xxx', 'xxx'])"</div>
                <Button type="primary" v-if="auths(['system:menu:add'])"
                  >我是多个或函数权限</Button
                >
              </div>
            </CollapsePanel>
            <CollapsePanel
              key="3"
              header="多个函数权限 authAll(['', '']) 满足所有返回true"
            >
              <div class="flex items-center">
                <div class="mr-5">用法 v-if="authAll(['xxx', 'xxx'])"</div>
                <Button
                  type="primary"
                  v-if="authAll(['system:menu:add', 'system:menu:search'])"
                  >我是多个并函数权限</Button
                >
              </div>
            </CollapsePanel>
          </Collapse>
        </div>
      </div>
    </div>
    <CodeMirror ref="codeRef" />
  </pageWrap>
</template>
<style scoped lang="less"></style>
